<template>
  <div>
    <div class="login-container">
      <div style="width: 350px" class="login-box">
        <div style="color:white;font-size: 24px;font-weight: bold;font-family: 幼圆;text-align: center;margin-bottom: 30px;">注 册</div>
        <el-form :model="data.form" ref="formRef" :rules="rules">
          <el-form-item prop="username">
            <input class="box-input"  v-model="data.form.username" />
          </el-form-item>
          <el-form-item prop="password">
            <input class="box-input" type="password" show-password  v-model="data.form.password" required=""/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;font-family: 幼圆;
            background-color: rgb(94,183,246)" round @click="register">注册</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-top: 30px;text-align: center;color: white;font-weight: bold;font-family: 幼圆">
          已有账号？请<a href="/login" style="color: #a1eeff;font-weight: bold;font-size: 18px">登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import request from "../utils/request";
import {ElMessage} from "element-plus";
import router from "../router";
const  rules = reactive({
  username:[
    {required: true,message:'请输入账号',trigger:'blur'},
  ],
  password:[
    {required: true,message:'请输入密码',trigger:'blur'},
  ],
})

const formRef = ref();
const register = () => {
  formRef.value.validate((valid)=>{
    if(valid){
      request.post('/register',data.form).then(res=>{
        if(res.code ==='200') {
          localStorage.setItem('student-user',JSON.stringify(res.data))
          ElMessage.success('注册成功')
          router.push('/login')

        }
        else{
          ElMessage.error(res.msg)
        }

      })
    }
  })
}

const data = reactive({
  form: { role: 'STUDENT' }
})
</script>

<style>
.login-container {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../src/assets/imgs/simple1.jpg");
  background-size: cover;
}
.login-box{
  background-color: rgba(255, 255, 255, 0.72);
  padding:30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(3px);
  border-radius: 25px;
  box-shadow: inset 0 0 2px #ffffff;
}
.box-input{
  border: none;
  font-size: 16px;
  width: 100%;
  height: 26px;
  border-radius: 15px;
  text-align:center;
  font-family: Impact;
}
.box-input:focus{
  outline: none;
  border: none;
  background-color: #e6eefd;
}
</style>